<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import * as Lodash from 'lodash';
  import SubTitle from '@/components/sub-title/index.vue';
  import ImgData from '@/components/img-data/index.vue';
  import TextData from '@/components/text-data/index.vue';
  import ScrollTable from '@/views/big-screen/scroll-table.vue';
  import useECharts from '@/hooks/useECharts';
  import { updateOptions, updateAxisData } from '@/utils/echarts_util';
  import { dataElder } from './data';
  import {
    ChartSleepQualityOptions,
    ChartSleepHoursOptions,
    ChartCallTimeOptions,
  } from './options';

  const riskColumns = ref([
    {
      title: '报警时间',
      dataIndex: 'alarmTime',
    },
    {
      title: '长者姓名',
      dataIndex: 'elderName',
    },
    {
      title: '联系电话',
      dataIndex: 'elderPhone',
    },
  ]);
  const commColumns = ref([
    {
      title: '长者姓名',
      dataIndex: 'elderName',
    },
    {
      title: '联系电话',
      dataIndex: 'elderPhone',
    },
    {
      title: '最近一次亲情通话时间',
      dataIndex: 'lastCallDatetime',
    },
  ]);
  const dataSign = ref(Lodash.cloneDeep(dataElder.sign));
  const dataBreatheException = ref(Lodash.cloneDeep(dataElder.sign.breathe[0]));
  const dataSleepQuality = ref(Lodash.cloneDeep(dataElder.sign.sleepQuality));
  const dataSleepHours = ref(Lodash.cloneDeep(dataElder.sign.sleepHours));
  const dataActionDevice = ref(Lodash.cloneDeep(dataElder.action.device));
  const dataActionRisks = ref([
    {
      title: '今日跌倒风险长者情况',
      name: '跌倒风险长者人数',
      count: dataElder.action.riskOfFall.elderCount,
      alarms: Lodash.cloneDeep(dataElder.action.riskOfFall.alarms),
    },
    {
      title: '今日驻留风险长者情况',
      name: '驻留风险长者人数',
      count: dataElder.action.riskOfStay.elderCount,
      alarms: Lodash.cloneDeep(dataElder.action.riskOfStay.alarms),
    },
    {
      title: '今日超出电子围栏长者情况',
      name: '超出电子围栏长者人数',
      count: dataElder.action.riskOfFlee.elderCount,
      alarms: Lodash.cloneDeep(dataElder.action.riskOfFlee.alarms),
    },
  ]);
  const dataSocial = ref(Lodash.cloneDeep(dataElder.social));
  const dataCallTime = ref(
    Lodash.cloneDeep(dataElder.social.callTimeDistribution)
  );
  const dataCommunication = ref(
    Lodash.cloneDeep(dataElder.social.weekCommunication)
  );

  const chartSleepQuality = ref();
  const chartSleepHours = ref();
  const chartCallTime = ref();

  const { setOptions: setChartSleepQualityOptions } =
    useECharts(chartSleepQuality);
  const { setOptions: setChartSleepHoursOptions } = useECharts(chartSleepHours);
  const { setOptions: setChartCallTimeOptions } = useECharts(chartCallTime);

  onMounted(() => {
    // 睡眠质量
    const data = dataSleepQuality.value.reverse();
    setChartSleepQualityOptions(
      updateOptions(
        updateAxisData(
          Lodash.cloneDeep(ChartSleepQualityOptions),
          data,
          'yAxis'
        ),
        [data]
      )
    );
    // 深度睡眠时间
    setChartSleepHoursOptions(
      updateOptions(
        updateAxisData(
          Lodash.cloneDeep(ChartSleepHoursOptions),
          dataSleepHours.value,
          'xAxis'
        ),
        [dataSleepHours.value]
      )
    );
    // 通话时长分布情况
    setChartCallTimeOptions(
      updateOptions(
        updateAxisData(
          Lodash.cloneDeep(ChartCallTimeOptions),
          dataCallTime.value,
          'xAxis'
        ),
        [dataCallTime.value]
      )
    );
  });
</script>

<template>
  <div class="vls-elder flex">
    <div class="vls-elder-left flex-col border-light w-[30%]">
      <SubTitle title="体征动态" />
      <div class="vls-elder-items flex-col">
        <div class="vls-elder-sign vls-elder-item" style="margin-top: 2vh">
          <div class="title color-light">体征监护设备</div>
          <div class="elder-sign-data vls-elder-item-data flex">
            <ImgData
              style="width: 160px"
              bg="bg2"
              name-color="#FFF"
              value-color="#00F9FF"
              name="累计安装数量"
              :value="dataSign.device.totalInstall"
            />
            <ImgData
              style="width: 160px"
              bg="bg2"
              name-color="#FFF"
              value-color="#00F9FF"
              name="正常运转数量"
              :value="dataSign.device.rightRun"
            />
          </div>
        </div>
        <div class="vls-elder-breathe flex">
          <div class="item1">
            <div class="title color-light">呼吸异常</div>
            <div class="elder-breathe-data">
              <TextData
                style="width: 160px"
                bg="bg1"
                value-color="#c280ff"
                :name="dataBreatheException.name"
                :value="dataBreatheException.value"
              />
            </div>
          </div>
          <div class="item2">
            <div class="title color-light">呼吸质量</div>
            <div class="elder-breathe-data flex"> </div>
          </div>
        </div>
        <div class="vls-sleepQuality-sign">
          <div class="title color-light">睡眠质量</div>
          <div class="elder-sleepQuality-data flex">
            <div ref="chartSleepQuality" class="w-full h-[16vh]"></div>
          </div>
        </div>
        <div class="vls-sleepHours-sign">
          <div class="title color-light">深睡眠时长情况</div>
          <div class="elder-sleepHours-data flex">
            <div ref="chartSleepHours" class="w-full h-[20vh]"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="vls-elder-item vls-elder-center flex-col border-light">
      <SubTitle title="行为动态" />
      <div class="vls-elder-items flex-col">
        <div
          class="vls-elder-actionDevice vls-elder-item"
          style="margin-top: 2vh"
        >
          <div class="title color-light">智能穿戴和行动监护设备</div>
          <div class="elder-actionDevice-data vls-elder-item-data flex">
            <ImgData
              style="width: 170px"
              bg="bg3"
              name-color="#FFF"
              name="随身呼叫器"
              :value="dataActionDevice.portablePager"
            />
            <ImgData
              style="width: 170px"
              bg="bg3"
              name-color="#FFF"
              name="毫米波跌倒雷达"
              :value="dataActionDevice.waveFallRadar"
            />
            <ImgData
              style="width: 170px"
              bg="bg3"
              name-color="#FFF"
              name="设备正常工作率"
              :value="dataActionDevice.deviceAccuracy"
            />
          </div>
        </div>
        <div
          v-for="(risk, i) of dataActionRisks"
          :key="'risk-' + i"
          class="vls-elder-action vls-elder-item"
          style="margin-top: 2vh"
        >
          <div class="title color-light">{{ risk.title }}</div>
          <div class="vls-elder-risk flex">
            <div class="info">
              <TextData
                style="width: 120px"
                bg="bg1"
                value-color="#FF0000"
                :name="risk.name"
                :value="risk.count"
                :reverse="true"
              />
            </div>
            <div class="vls-ov2-site-staff">
              <ScrollTable
                size="small"
                :columns="riskColumns"
                :data="risk.alarms"
                :height="120"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vls-elder-item vls-elder-right flex-col border-light w-[30%]">
      <SubTitle title="社交动态" />
      <div class="vls-elder-items flex-col">
        <div class="vls-elder-social vls-elder-item" style="margin-top: 2vh">
          <div class="title color-light">今日老人亲情通话情况</div>
          <div class="elder-social-data vls-elder-item-data flex">
            <ImgData
              style="width: 150px"
              bg="bg2"
              name-color="#FFF"
              value-color="#00F9FF"
              name="亲情通话总次数"
              :value="dataSocial.callCount"
            >
              <template #unit><span style="font-size: 15px">次</span></template>
            </ImgData>
            <ImgData
              style="width: 150px"
              bg="bg2"
              name-color="#FFF"
              value-color="#00F9FF"
              name="亲情通话总时长"
              :value="dataSocial.callTime"
            >
              <template #unit
                ><span style="font-size: 15px">分钟</span></template
              >
            </ImgData>
          </div>
        </div>
        <div class="vls-elder-call vls-elder-item" style="margin-top: 2vh">
          <div class="title color-light">通话时长分布情况</div>
          <div class="elder-call-data flex">
            <div ref="chartCallTime" class="w-full h-[25vh]"></div>
          </div>
        </div>
        <div class="vls-elder-comm vls-elder-item" style="margin-top: 2vh">
          <div class="title color-light">亲情交流较弱长者情况</div>
          <div class="elder-comm-data">
            <div class="elder-comm-tabs">
              <span>最近未使用过亲情通话老人数据</span>
            </div>
            <ScrollTable
              size="small"
              :columns="commColumns"
              :data="dataCommunication.day03"
              :height="190"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
  .vls-elder {
    column-gap: 30px;
  }

  .vls-elder-items {
    flex: 1;
    justify-content: space-between;

    .vls-elder-item {
      .vls-elder-item-data {
        padding: 2vh 4vw;
        justify-content: space-between;
      }
    }
  }

  .vls-elder-left {
    .vls-elder-breathe {
      column-gap: 20px;

      .title {
        margin-bottom: 10px;
      }
    }
  }

  .vls-elder-center {
    flex: 1;

    .vls-elder-actionDevice {
      .elder-actionDevice-data {
        padding: 1vh 1vw;
        justify-content: space-around;
      }
    }

    .vls-elder-action {
      .vls-elder-risk {
        column-gap: 20px;
        margin-top: 1vh;
      }
    }
  }

  .vls-elder-right {
    .vls-elder-comm {
      .elder-comm-data {
        margin-top: 1vh;

        .elder-comm-tabs {
          font-size: 12px;
          margin-bottom: 5px;
        }
      }
    }
  }
</style>
